<template>
	<view class="content">
		<u-navbar title="商家活动订单" :autoBack="true">
		</u-navbar>
		<view class="top" @click="show = true">
			<view class="left">活动：</view>
			<view class="right">{{ activity_name }}</view>
		</view>

		<view class="nav">
			<view class="s1" :class='{active: type == 0}' @click='setType(0)'>全部</view>
			<view class="s1" :class='{active: type == 1}' @click='setType(1)'>未发货</view>
			<view class="s1" :class='{active: type == 2}' @click='setType(2)'>已发货</view>
			<view class="s1" :class='{active: type == 3}' @click='setType(3)'>完成</view>
		</view>

		<view class="list" v-if="list.length > 0">
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="s1">
					<text class="c1">用户名：</text>
					<text class="c2">{{ item.user.nickname }}</text>
					<text :class="'c3 status_' + item.status">{{ item.status_text }}</text>
				</view>
				<view class="s1">
					<text class="c1">推荐人：</text>
					<text class="c2">{{ item.dre ? item.dre.nickname : '--' }}</text>
				</view>
				<view class="s1">
					<text class="c1">活动名：</text>
					<text class="c2">{{ item.activity.title }}</text>
				</view>
				<view class="s1">
					<text class="c1">手机号码：</text>
					<text class="c2">{{ item.take_over_tel == '' ? item.user.mobile : item.take_over_tel }}</text>
				</view>
				<view class="s1">
					<text class="c1">购买时间：</text>
					<text class="c2">{{ item.create_time_text }}</text>
				</view>
				<view class="s1">
					<text class="c1">支付金额：</text>
					<text class="c2">{{ item.money }}</text>
				</view>
				<view class="s1">
					<text class="c1">发货方式：</text>
					<text class="c2">{{ ['未选择','邮寄','无需物流'][item.take_over_way] }}</text>
				</view>
				<view class="s1">
					<text class="c1">订单号：</text>
					<text class="c2">{{ item.order_no }}</text>
				</view>
				<view class="s1">
					<text class="c1">备注：</text>
					<text class="c2">{{ item.note || '-' }}</text>
				</view>

				<view class="but">
					<view class="e1 e2" @click="onPhone(item)">
						<u-icon name="phone-fill" color='#7677EB'></u-icon>
						<text>拨打电话</text>
					</view>
					<view class="e1" @click="goOut(item)">
						<text>发货信息</text>
					</view>
				</view>
			</view>

		</view>

		<view class="empty" v-else>
			<u-empty mode="order" text="订单为空"></u-empty>
		</view>

		<u-picker :show="show" :columns="columns" keyName="title" @confirm="confirm" @close='onClose' @cancel='onClose'>
		</u-picker>

		<!-- <u-toast ref="uToast"></u-toast> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0,
				list: [],
				page: 1,
				stop_loading: false,
				activity_id: 0,
				activity_name: '',
				show: false,
				columns: [],
			};
		},
		onLoad(options) {
			this.activity_id = options.id || 0;
			this.getShopNameList();
			this.loadmore();
		},
		onReachBottom() {
			this.loadmore();
		},
		methods: {
			setType(type) {
				this.type = type
				this.page = 1;
				this.stop_loading = false;
				this.loadmore();
			},
			loadmore() {
				let that = this
				let params = {
					type: this.type,
					page: this.page,
					activity_id: this.activity_id
				};
				if (this.stop_loading) {
					return;
				}
				uni.showLoading();
				this.$API.getShopActivity(params).then(res => {
					if (this.page == 1) {
						this.list = [];
					}
					res.data.data.forEach(v => {
						this.list.push(v)
					});
					if (res.data.last_page <= this.page) {
						this.stop_loading = true;
					}
					this.page += 1;
					uni.hideLoading();
				}).catch(err => {
					console.log('err', err);
					uni.hideLoading();
				})
			},
			getShopNameList() {
				this.$API.getShopNameList().then(res => {
					this.columns = [res.data];
					if (this.activity_id > 0) {
						let v = res.data.find((item, index, arr) => {
							return item.id == this.activity_id
						})
						this.activity_name = v.title || '';
					}
				})
			},
			onClose() {
				this.show = false;
			},
			onPhone(item) {
				if (item.take_over_tel != '' || item.user.mobile != '') {
					uni.makePhoneCall({
						phoneNumber: item.take_over_tel != '' ? item.take_over_tel : item.user.mobile
					})
				}
			},
			goOut(item) {
				if (item.take_over_tel == '') {
					// this.$refs.uToast.show({
					//     type: 'error',
					//     title: '失败主题',
					//     message: "用户还没有完美收货信息，可以联系用户提醒",
					// });
					uni.$u.toast('用户还没有完善收货信息，可以联系用户提醒');
					return false;
				}
				if (item.take_over_way == 0) {
					// this.$refs.uToast.show({
					//     type: 'error',
					//     title: '失败主题',
					//     message: "用户还没有完美收货信息，可以联系用户提醒",
					// });
					uni.$u.toast('用户还未提供取货方式');
					return false;
				}
				if (item.take_over_way == 2) {
					return uni.navigateTo({
						url: '/pages/activity/customOut?id=' + item.id + '&activityid=' + this.activity_id
					});
				}
				uni.navigateTo({
					url: '/pages/activity/out?id=' + item.id + '&activityid=' + this.activity_id
				})
			},
			confirm(e) {
				console.log(e)
				this.activity_name = e.value[0].title;
				this.activity_id = e.value[0].id;
				this.show = false
				this.setType(0)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 670rpx;
		margin: 0 auto;
		height: 100vh;
	}

	.top {
		@include flex;

		.left {
			flex: 0 0 100rpx;
		}

		align-items: center;
		background-color: #fff;
		margin-top: 52rpx;
		padding: 20rpx;
		border-radius: 16rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #3D3D3D;
	}

	.nav {
		@include flex;
		justify-content: space-between;
		width: 654rpx;
		height: 84rpx;
		border-radius: 48rpx;
		background-color: #E6EDF5;
		padding: 6rpx 8rpx;
		margin-top: 52rpx;

		.s1 {
			width: 164rpx;
			height: 84rpx;
			border-radius: 40rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #0A1629;
			line-height: 84rpx;
			text-align: center;

			&.active {
				background-color: #7677EB;
				color: #FFFFFF;
			}
		}
	}

	.list {

		.item {
			@include flex(column);
			width: 590rpx;
			padding: 40rpx;
			background-color: #fff;
			border-radius: 48rpx;
			margin: 50rpx auto 0 auto;

			.s1 {
				@include flex;
				position: relative;
				align-content: center;
				margin-bottom: 46rpx;

				.c1 {
					width: 150rpx;
					font-size: 28rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #91929E;
					line-height: 32rpx;
					margin-right: 20rpx;
					text-align: right;
				}

				.c2 {
					width: 440rpx;
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #0A1629;
					line-height: 32rpx;
					overflow: hidden;
				}

				.c3 {
					position: absolute;
					height: 32rpx;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 500;
					color: #9E9E9E;
					line-height: 32rpx;
					right: 0;
					top: 0;

					&.status_2 {
						color: #688AB5;
					}

					&.status_3 {
						color: #00ff00;
					}
				}
			}

			.but {
				@include flex;
				justify-content: space-between;

				.e1 {
					width: 240rpx;
					height: 96rpx;
					background: #7677EB;
					box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
					border-radius: 28rpx;
					@include flex;
					justify-content: center;

					text {
						font-size: 30rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 96rpx;
					}

					/deep/ .u-icon {
						margin-right: 18rpx;
					}
				}

				.e2 {
					background-color: #fff;

					text {
						color: #7677EB;
					}
				}
			}
		}

	}

	.empty {
		display: flex;
		height: 70%;
		flex-direction: column;
		justify-content: center;
	}
</style>